<template>
    <view class="container">
        <u-navbar
            title="本期藏品"
            :autoBack="true"
            leftIconSize="50rpx"
            :bgColor="'rgba(255,255,255, '+bgOpacity+')'"
            :titleStyle="{
                fontSize: '34rpx',
                fontWeight: 'bold',
                color: 'rgba(0, 0, 0, '+bgOpacity+')',
            }"
            height="100rpx"
            :leftIconColor="'rgba(0, 0, 0, '+bgOpacity+')'"
        >
        </u-navbar>
        <view class="series-info" id="seriesInfo">
            <image
                :src="aggregateInfo.coverImg"
                class="banner"
                mode="widthFix"
            ></image>
            <view class="mc"></view>
            <view class="series-desc">
                <view class="series-bottom">
                    <u-text
                        :text="aggregateInfo.title"
                        size="36rpx"
                        color="#ffffff"
                        bold
                        lineHeight="50rpx"
                        margin="0 0 30rpx 0"
                    ></u-text>
                    <author-item
                        :showBtn="false"
                        color="#ffffff"
                        :author="aggregateInfo.author"
                        v-if="aggregateInfo.author"
                    ></author-item>
                    <view class="series-info-detail">
                        {{ aggregateInfo.description }}
                    </view>
                </view>
            </view>
        </view>
        <view class="nft-list">
            <view class="list-title">本期藏品</view>
            <u-row  justify="space-between" v-if="nftAggregateList.length > 0" :gutter="20" customStyle="flex-wrap: wrap">
                <u-col :span="6" @click="$u.route({
                            url: 'pages_v2/nftDetail/index',
                            params: {
                                productId: item.productId
                            }
                        })" v-for="item in nftAggregateList" :key="item.id">
                    <nft-item
                        :product="item"
                        :timestamp="timestamp"
                        class="nft-item"
                        @handelClick="onsubmit(item)"
                    ></nft-item>
                </u-col>
            </u-row>
            <u-empty
                mode="data"
                width="400rpx"
                height="400rpx"
                icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                class="empty"
                v-else
            >
            </u-empty>
            <!--u-loadmore
                height="50rpx"
                :status="loadStatus"
                v-if="total > 0"
                marginTop="20rpx"
                marginBottom="20rpx"
                fontSize="32rpx"
                iconSize="34rpx"
                line
            /-->
        </view>
        <u-popup
            :show="popupShow"
            mode="center"
            :customStyle="{
                width: '580rpx',
                background: '#FFFFFF',
                boxShadow: '0px 0px 13rpx 0px #999999',
                borderRadius: '18rpx'
            }"
        >
            <popup-context
                v-if="popupShow"
                @cancel="closePopup"
                :extData="extData"
                :p_type="popupType"
                @confirm="handleConfirm"
            ></popup-context>
        </u-popup>
    </view>
</template>

<script>
    import AuthorItem from "@/components/AuthorItem"
    import NftItem from "@/components/NftItem"
    import PopupContext from "@/components/PopupContext"
    import { getNftAggregateData, getAggregateInfoData } from "@/config/api"
    import { createGrabOrder } from "@/config/api-java"
    export default {
        name: "index",
        components: {
            AuthorItem,
            NftItem,
            PopupContext
        },
        data() {
          return {
              listQuery: {
                  page: 1,
                  list_rows: 10,
                  aggregateId: null,
                  userId: this.$store.getters.userId
              },
              total: 0,
              nftAggregateList: [],
              aggregateInfo: {},
              timestamp: 0,
              popupShow: false,
              popupType: "first",
              extData: {},
              actionProduct: null,
              scrollTop: 0,
              serialHeight: 0
          }
        },
        async onLoad(option) {
            this.aggregateInfo = await getAggregateInfoData(option.id)
            this.listQuery.aggregateId = option.id
            await this.getData()
        },
        async onPullDownRefresh() {
            await this.getData()
            uni.stopPullDownRefresh()
        },
        computed: {
            loadStatus() {
                if (this.total > this.nftAggregateList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            },
            bgOpacity() {

                if(this.scrollTop === 0) {
                    return 0
                } else if (this.scrollTop > 0 && this.scrollTop < 50) {
                    if (this.serialHeight == 0) {
                        this.getSerialHeight()
                    }
                    return 0
                } else if (this.scrollTop < this.serialHeight) {
                    var opacity = Math.floor(this.scrollTop/this.serialHeight * 10) / 10
                    return  opacity
                } else {
                    return 1
                }
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        methods: {
            async getData() {
                const res = await getNftAggregateData(this.listQuery)
                this.nftAggregateList = res.items
                this.total = res.total
                this.timestamp = res.timestamp
            },
            async onsubmit(product) {
                if (!this.$store.getters.identify) {
                    this.popupType = "real"
                    this.popupShow = true
                    return
                }
                if (this.$store.getters.userPoint < product.grabPoint) {
                    this.popupType = "fail"
                    this.popupShow = true
                    return
                }
                const res = await createGrabOrder({productId: product.productId})
                this.popupType = "grab"
                this.extData = {
                    grabEndAt: product.grabEndAt
                }
                this.popupShow = true
                this.grabInfo = {
                    id: res
                }
                await this.getData()
            },
            closePopup() {
               this.popupShow = false
            },
            handleConfirm() {
                if (this.popupType === "real") {
                    this.popupShow = false
                    this.$u.route("pages/identify/index")
                }
            },
            getSerialHeight() {
                var than = this
                const query = uni.createSelectorQuery().in(this);
                query.select('#seriesInfo').boundingClientRect(data => {
                    //console.log(data)
                    //console.log("节点离页面顶部的距离为" + data.top);
                    than.serialHeight = data.height
                    //console.log("得到布局位置信息" + JSON.stringify(data));
                }).exec();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .series-info{
            width: 100%;
            //height: 750rpx;
            position: relative;
            .banner {
                width: 100%;
                height: 100%;
            }
            .mc {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                //height: 750rpx;
                //background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 90%)
                //background: url("https://img.ionepin.com/3696b434bc74b32e4fa4e593a5063bc6239049fc.png") no-repeat;
                //background-size: 100% 100%;
            }
            .series-desc {
                box-sizing: border-box;
                padding: 52rpx 49rpx;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 750rpx;
                display: flex;
                align-items: flex-end;
                background: url("https://img.ionepin.com/3696b434bc74b32e4fa4e593a5063bc6239049fc.png") no-repeat;
                background-size: 100% 100%;
                //background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.7) 90%);
                .series-info-detail {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 1.5;
                    margin-top: 22rpx;
                }
            }
        }
        .nft-list {
            padding: 1rpx 22rpx;
            .list-title {
                text-align: center;
                font-size: 32rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                line-height: 45rpx;
                margin-bottom: 34rpx;
            }
            .nft-item {
                margin-bottom: 40rpx;
            }
            .empty {
                padding-bottom: 50rpx;
            }
        }
    }
</style>
